import React, {PureComponent} from 'react';
import {
	StyleSheet,
	View,
	ListView,
	Image,
	Text,
	TouchableOpacity,
	Dimensions
} from 'react-native';

// 获取JSON数据
let ShareData = require('./../../ShareData.json').data;

// 常量设置
let { width: WIDTH } = Dimensions.get('window');
let cols = 3;
let cellWh = 100;
let vMargin = (WIDTH - cellWh * cols) / (cols + 1);
let hMargin = 25;


/**
 * @FileName: AListViewDemo
 * @Author: mazaiting
 * @Date: 2018/6/11
 * @Description:
 */
class AListViewDemo extends PureComponent {
	constructor(props) {
		super(props);
		// 设置数据源
		let ds = new ListView.DataSource({
			rowHasChanged: (r1, r2) => r1 !== r2
		});
		this.state = {
			dataSource: ds.cloneWithRows(ShareData)
		}
	}
	
	render() {
		return (
			<ListView
				dataSource={this.state.dataSource}
				renderRow={(rowData) => this.renderRow(rowData)}
				contentContainerStyle={styles.listViewStyle}
			/>
		)
	}
	
	/**
	 * 绘制行
	 * @param rowData
	 */
	renderRow(rowData) {
		return(
			<TouchableOpacity activeOpacity={0.5}>
				<View style={styles.innerViewStyle}>
					<Image source={{uri: rowData.icon}} style={styles.iconStyle}/>
					<Text>{rowData.title}</Text>
				</View>
			</TouchableOpacity>
		)
	}
}

/**
 * 样式属性
 */
const styles = StyleSheet.create({
	container: {
		backgroundColor: '#DDD'
	},
	listViewStyle: {
		// 设置主轴方向为横向
		flexDirection: 'row',
		// 设置摆放不下换行
		flexWrap: 'wrap'
	},
	innerViewStyle: {
		marginTop: hMargin,
		width: cellWh,
		height: cellWh,
		marginLeft: vMargin,
		// 居中
		alignItems: 'center'
	},
	iconStyle: {
		width: 80,
		height: 80
	}
});

/**
 * 导出当前Module
 */
module.exports = AListViewDemo;